<template>
  <div class="header">
    <el-header class="container">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="text-align: right"
        @select="handleSelect"
      >
        <el-menu-item
          ><img
            class="img-fluid"
            src="../../assets/images/loginLogo.png"
            alt="img"
        /></el-menu-item>
        <el-menu-item index="1">
          <router-link :to="'/index'">首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link :to="'/panorama'">碳势全景图</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link :to="'/blockchain'">区块链管理</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link :to="'/userinfo'">用户情况</router-link>
        </el-menu-item>
        <el-menu-item index="5">
          <router-link :to="'/contact'">联系我们</router-link>
        </el-menu-item>
        <el-menu-item index="6">
          <a
            href="javascript:"
            onClick="window.location.href='http://43.138.40.135:81'"
            >能源交易</a
          >
        </el-menu-item>

        <div v-if="!isLogin" class="headerbtnbox">
          <el-button class="login-btn" @click="loginVisible = true"
            >登 录</el-button
          >
          <el-button type="primary" @click="regVisible = true">注 册</el-button>
        </div>

        <div v-else class="headerbtnbox">
          <img src="../../assets/images/user.png" class="userImg" alt="头像" />
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{ userDate.name }}<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">
                <router-link :to="'/userCenter'">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item command="2" @click="loginVisible = true"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item command="3">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu>
    </el-header>

    <el-dialog title="登 录" :visible.sync="loginVisible" width="600px">
      <el-form ref="loginDto" :model="loginDto" label-width="120px">
        <el-form-item label="管理员账号">
          <el-input
            v-model="loginDto.m_id"
            type="input"
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item label="管理员密码">
          <el-input
            v-model="loginDto.m_pwd"
            type="input"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="loginVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">登 录</el-button>
        <el-button type="primary" @click="$router.push('/userindex')"
          >用户界面</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="注册" :visible.sync="regVisible" width="600px">
      <el-form ref="registerParam" :model="registerParam" label-width="120px">
        <el-form-item label="账号">
          <el-input
            v-model="registerParam.m_id"
            placeholder="请输入管理员账号"
          />
        </el-form-item>
        <el-form-item label="名字">
          <el-input
            v-model="registerParam.m_name"
            placeholder="请输入管理员姓名"
          />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="registerParam.m_pwd"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="registerParam.m_pwd2"
            placeholder="请再次输入密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="regVisible = false">取 消</el-button>
        <el-button type="primary" @click="registered">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { m_login, m_register } from "@/api/m_head_index";
export default {
  props: {
    activeIndex: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      loginVisible: false,
      regVisible: false,
      reginfoVisible: false,
      loginDto: {
        m_id: "",
        m_pwd: "",
      },
      isLogin: localStorage.getItem("Token"),
      userDate: {
        name: localStorage.getItem("Name"),
      },
      registerParam: {
        m_id: "",
        m_pwd: "",
        m_pwd2: "",
        m_name: "",
      },
    };
  },
  methods: {
    clear() {
      this.registerParam = {
        m_id: "",
        m_name: "",
        m_pwd: "",
        m_pwd2: "",
      };
      this.regVisible = false;
    },
    handleCommand(command) {
      if (command === "3") {
        // 退出登录
        this.isLogin = false;
        localStorage.removeItem("Token");
        localStorage.removeItem("Name");
        this.$message.success("退出成功！");
      }
    },
    onSubmit() {
      if (!this.loginDto.m_id || !this.loginDto.m_pwd) {
        this.$message.error("账号或者密码为空，请填写。");
        return;
      }
      m_login(this.loginDto)
        .then((res) => {
          console.log(res);
          this.$message.success("登录成功！");

          localStorage.setItem("Token", res.data.token);
          localStorage.setItem("Name", res.data.m_name);
          //  当前用户名更新
          this.userDate.name = res.data.m_name;

          this.loginDto.m_id = "";
          this.loginDto.m_pwd = "";

          this.loginVisible = false;
          this.isLogin = true;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    registered() {
      if (
        this.registerParam.m_id === "" ||
        this.registerParam.m_name === "" ||
        this.registerParam.m_pwd === "" ||
        this.registerParam.m_pwd2 === ""
      ) {
        this.$message.error("数据请填写完整！");
        return;
      }
      if (this.registerParam.m_pwd2 != this.registerParam.m_pwd) {
        this.$message.error("两次密码不一致！");
        return;
      }
      m_register(this.registerParam).then((res) => {
        this.regVisible = false;
        this.$message.success("注册成功！");
        this.registerParam = {
          m_id: "",
          m_pwd: "",
          m_pwd2: "",
          m_name: "",
        };
      });
    },
    handleClose(done) {},
  },
};
</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-menu--horizontal > .el-menu-item.is-active:hover,
.el-menu--horizontal > .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.headerbtnbox img {
  width: 37px;
  height: 37px;
  margin-right: 10px;
  border-radius: 50px;
}
</style>
